<template>
	<!-- 左侧所有组件的展示列表 -->
	<div class="my-content-charts flex-col" :class="{ scoped: !$store.chart.charts }">
		<!-- 页面 -->
		<ChartsPage />
		<!-- 组件 -->
		<ChartsAssembly />
	</div>
</template>

<script setup>
import ChartsPage from './components/ChartsPage.vue';
import ChartsAssembly from './components/ChartsAssembly.vue';
</script>

<style lang="scss" scoped>
/* 整体宽度 */
$width: 280px;
@include b(content-charts) {
	width: $width;
	transition: var(--el-transition-all);
	overflow: hidden;
	margin-right: 2px;
	&.scoped {
		width: 0;
	}

	:deep(.my-panel) {
		width: $width;
	}
}
</style>
